<div [@routerTransition]>
    <div class="m-subheader">
        <div class="row align-items-center">
            <div class="mr-auto col-auto">
                <h3 class="m-subheader__title">
                    <span>工装台帐管理</span>
                </h3>
            </div>
            <div class="col text-right mt-3 mt-md-0"></div>
        </div>
    </div>
    <div class="m-content">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__body">
                <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                    <form class="horizontal-form" autocomplete="off">
                        <div class="m-form m-form--label-align-right">
                            <div class="row">
                                <div class="col-md-11">
                                    <div class="row align-items-center">
                                        <div class="input-width">
                                            <div class="form-group m-form__group row">
                                                <label class="col-4 col-form-label" for="f_MaterialCode"
                                                    >工装编号:</label
                                                >
                                                <div class="col-8">
                                                    <input
                                                        type="text"
                                                        class="form-control m-input"
                                                        name="f_MaterialCode"
                                                        id="f_MaterialCode"
                                                        [(ngModel)]="f_MaterialCode"
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="input-width">
                                            <div class="form-group m-form__group row">
                                                <label class="col-4 col-form-label" for="Search_TaskNum"
                                                    >工装名称:</label
                                                >
                                                <div class="col-8">
                                                    <input
                                                        type="text"
                                                        class="form-control m-input"
                                                        name="Search_TaskNum"
                                                        id="Search_TaskNum"
                                                        [(ngModel)]="f_MaterialName"
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                        <!-- <div class="input-width">
                                            <div class="form-group m-form__group row">
                                                <label class="col-4 col-form-label" for="Search_f_Warehousename">库房名称:</label>
                                                <div class="col-8">
                                                    <input type="text" class="form-control m-input" name="Search_f_Warehousename"
                                                        id="Search_f_Warehousename" [(ngModel)]="f_WarehouseName" />
                                                </div>
                                            </div>
                                        </div> -->
                                        <div class="input-width">
                                            <div class="form-group m-form__group row">
                                                <label class="col-4 col-form-label" for="warehouseNameFilter"
                                                    >仓库:</label
                                                >
                                                <div class="col-8">
                                                    <camc-multiSelect
                                                        class="float-left"
                                                        id="warehouseNameFilter"
                                                        [options]="roomOption"
                                                        name="tabdle"
                                                        [(ngModel)]="selectedWareHouse"
                                                        [style]="{ width: '220px' }"
                                                        styleClass="form-control"
                                                        defaultLabel="选择仓库"
                                                        maxSelectedLabels="1"
                                                        selectedItemsLabel="已选择{0}个仓库"
                                                    >
                                                    </camc-multiSelect>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- <div class="input-width">
                                            <div class="form-group m-form__group row">
                                                <label class="col-4 col-form-label" for="Search_f_RealInventory"
                                                    >实际库存:</label
                                                >
                                                <div class="col-8">
                                                    <input
                                                        type="text"
                                                        class="form-control m-input"
                                                        name="Search_f_RealInventory"
                                                        id="Search_f_RealInventory"
                                                        [(ngModel)]="f_RealInventory"
                                                    />
                                                </div>
                                            </div>
                                        </div> -->
                                        <!-- <div class="input-width">
                                            <div class="form-group m-form__group row">
                                                <label class="col-4 col-form-label" for="Search_DrawingNum"
                                                    >品牌:</label
                                                >
                                                <div class="col-8">
                                                    <input
                                                        type="text"
                                                        class="form-control m-input"
                                                        name="Search_DrawingNum"
                                                        id="Search_DrawingNum"
                                                        [(ngModel)]="f_TradeMark"
                                                    />
                                                </div>
                                            </div>
                                        </div> -->
                                        <!-- <div class="input-width">
                                            <div class="form-group m-form__group row">
                                                <label class="col-4 col-form-label" for="Search_MaterialName"
                                                    >状态:</label
                                                >
                                                <div class="col-8">
                                                    <input
                                                        type="text"
                                                        class="form-control m-input"
                                                        name="Search_MaterialName"
                                                        id="Search_MaterialName"
                                                        [(ngModel)]="f_Station"
                                                    />
                                                </div>
                                            </div>
                                        </div> -->
                                        <!-- <div class="input-width">
                                            <div class="form-group m-form__group row">
                                                <label class="col-4 col-form-label" for="Search_CertificationNum"
                                                    >质量等级:</label
                                                >
                                                <div class="col-8">
                                                    <input
                                                        type="text"
                                                        class="form-control m-input"
                                                        name="Search_CertificationNum"
                                                        id="Search_CertificationNum"
                                                        [(ngModel)]="f_QualityLevel"
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                    </div> -->
                                        <!-- <div class="row align-items-center">
                                        <div class="input-width">
                                            <div class="form-group m-form__group row">
                                                <label class="col-4 col-form-label" for="f_TecCondition"
                                                    >技术条件:</label
                                                >
                                                <div class="col-8">
                                                    <input
                                                        type="text"
                                                        class="form-control m-input"
                                                        name="f_TecCondition"
                                                        id="f_TecCondition"
                                                        [(ngModel)]="f_TecCondition"
                                                    />
                                                </div>
                                            </div>
                                        </div> -->
                                        <!-- <div class="input-width">
                                            <div class="form-group m-form__group row">
                                                <label class="col-4 col-form-label" for="Search_ReCheckNum"
                                                    >批处理号:</label
                                                >
                                                <div class="col-8">
                                                    <input
                                                        type="text"
                                                        class="form-control m-input"
                                                        name="Search_ReCheckNum"
                                                        id="Search_ReCheckNum"
                                                        [(ngModel)]="f_InventBatchID"
                                                    />
                                                </div>
                                            </div>
                                        </div> -->
                                        <!-- <div class="input-width">
                                            <div class="form-group m-form__group row">
                                                <label class="col-4 col-form-label" for="Search_Dept">部门:</label>
                                                <div class="col-8">
                                                       
                                                    <camc-multiSelect
                                                    class="float-left"
                                                    id="userDataPermissions"
                                                    [options]="userDataPermissions"
                                                    name="table"
                                                    [(ngModel)]="selectedDepts"
                                                    [style]="{ width: '220px'}"
                                                    styleClass="form-control"
                                                    defaultLabel="选择部门"
                                                    maxSelectedLabels="5"
                                                    selectedItemsLabel="已选择 {0} 个部门"
                                                >
                                                </camc-multiSelect>
                                                </div>  
                                            </div>
                                        </div> -->
                                        <!-- <div class="input-width">
                                            <div class="form-group m-form__group row">
                                                <label class="col-4 col-form-label" for="Search_WarehouseName"
                                                    >仓库:</label
                                                >
                                                <div class="col-8">
                                                    <input
                                                        type="text"
                                                        class="form-control m-input"
                                                        name="Search_WarehouseName"
                                                        id="Search_WarehouseName"
                                                        [(ngModel)]="f_WarehouseName"
                                                    />
                                                </div>
                                            </div>
                                        </div> -->
                                        <div class="input-width">
                                            <div class="form-group m-form__group row">
                                                <label class="col-4 col-form-label" for="Search_MaterialName"
                                                    >数量:</label
                                                >
                                                <div class="col-8">
                                                    <camc-dropdown-auto
                                                        [options]="useableOptions"
                                                        name="isuseable"
                                                        [(ngModel)]="isuseable"
                                                        class="float-left width-percent-100"
                                                    >
                                                    </camc-dropdown-auto>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="input-width">
                                            <div class="form-group m-form__group row">
                                                <label class="col-4 col-form-label" for="Search_DrawingNum">规格</label>
                                                <div class="col-8">
                                                    <input
                                                        type="text"
                                                        class="form-control m-input"
                                                        name="Search_Specification"
                                                        id="Search_Specification"
                                                        [(ngModel)]="f_Specification"
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="input-width">
                                            <div class="form-group m-form__group row">
                                                <label class="col-4 col-form-label" for="Search_DrawingNum"
                                                    >工装图号:</label
                                                >
                                                <div class="col-8">
                                                    <input
                                                        type="text"
                                                        class="form-control m-input"
                                                        name="Search_TradeMark"
                                                        id="Search_TradeMark"
                                                        [(ngModel)]="f_CAL_ToolingPictureId"
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="input-width">
                                            <div class="form-group m-form__group row">
                                                <label class="col-4 col-form-label" for="Search_DrawingNum"
                                                    >产品型号:</label
                                                >
                                                <div class="col-8">
                                                    <input
                                                        type="text"
                                                        class="form-control m-input"
                                                        name="Search_Precision"
                                                        id="Search_Precision"
                                                        [(ngModel)]="f_CAL_ProductModel"
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                        <!-- <div class="input-width">
                                            <div class="form-group m-form__group row">
                                                <label class="col-4 col-form-label" for="Search_DrawingNum">序列号:</label>
                                                <div class="col-8">
                                                    <input type="text" class="form-control m-input" name="Search_Precision" id="Search_Precision" [(ngModel)]="f_SeriousNum" />
                                                </div>
                                            </div>
                                        </div> -->
                                        <div class="input-width">
                                            <div class="form-group m-form__group row">
                                                <label class="col-4 col-form-label" for="Search_MaterialName"
                                                    >实际库存:</label
                                                >
                                                <div class="col-8">
                                                    <camc-dropdown-auto
                                                        [options]="useableOptions"
                                                        name="realInventory"
                                                        [(ngModel)]="realInventory"
                                                        class="float-left width-percent-100"
                                                    >
                                                    </camc-dropdown-auto>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-1 m--align-right">
                                    <button
                                        (click)="getAccounts()"
                                        class="btn btn-primary m--margin-top-40"
                                        type="button"
                                    >
                                        <i class="flaticon-search-1" [attr.aria-label]="l('Search')"></i>查询
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>

                    <hr />

                    <div class="row align-items-center">
                        <div class="col-md-6">
                            <h4 class="m-subheader__title">库存台帐信息</h4>
                        </div>
                        <div class="col-md-6 m--align-right">
                            <div
                                class="btn-group m-btn-
                            "
                                role="group"
                                aria-label="..."
                            >
                                <button
                                    [disabled]="!selectedAccounts?.length > 0"
                                    type="button"
                                    class="btn btn-default m--padding-left-5 m--padding-right-5"
                                    (click)="baseFieldDetailModal.showinfo(selectedAccounts[0].f_MaterialCode, '工装')"
                                    *ngIf="permission.isGranted('Pages.Tooling.BaseInfo.Detail')"
                                >
                                    详细信息
                                </button>
                                <!-- <button
                                    *ngIf="permission.isGranted('Pages.Tooling.Account.Out')"
                                    (click)="createOrEditToolingReceiveBillModal.showList(selectedAccounts)"
                                    class="btn btn-default m--padding-left-5 m--padding-right-5"
                                    [disabled]="!selectedAccounts?.length > 0"
                                    type="button"
                                >
                                    <i nz-icon type="printer" theme="outline"></i> 工装室领用
                                </button>
                                <button
                                    *ngIf="permission.isGranted('Pages.Tooling.Account.Transfer')"
                                    (click)="createOrEditToolingTransferModal.showList(selectedAccounts)"
                                    class="btn btn-default m--padding-left-5 m--padding-right-5"
                                    [disabled]="!selectedAccounts?.length > 0"
                                    type="button"
                                >
                                    <i nz-icon type="printer" theme="outline"></i> 调拨
                                </button>
                                <button
                                    *ngIf="permission.isGranted('Pages.Tooling.Account.Borrow')"
                                    (click)="createOrEditToolingBorrowBillModal.showList(selectedAccounts)"
                                    class="btn btn-default m--padding-left-5 m--padding-right-5"
                                    [disabled]="!selectedAccounts?.length > 0"
                                    type="button"
                                >
                                    <i nz-icon type="printer" theme="outline"></i> 本单位借用
                                </button>
                                <button
                                    *ngIf="permission.isGranted('Pages.Tooling.Account.BorrowOut')"
                                    (click)="createOrEditToolingBorrowOutBillModal.showList(selectedAccounts)"
                                    class="btn btn-default m--padding-left-5 m--padding-right-5"
                                    [disabled]="!selectedAccounts?.length > 0"
                                    type="button"
                                >
                                    <i nz-icon type="printer" theme="outline"></i> 外单位借用
                                </button>
                                <button
                                    *ngIf="permission.isGranted('Pages.Tooling.Account.Scrap')"
                                    (click)="createOrEditToolingScrapBillModal.showList(selectedAccounts)"
                                    class="btn btn-default m--padding-left-5 m--padding-right-5"
                                    [disabled]="!selectedAccounts?.length > 0"
                                    type="button"
                                >
                                    <i nz-icon type="printer" theme="outline"></i> 工装室报废
                                </button>
                                <button
                                    *ngIf="permission.isGranted('Pages.Tooling.Account.Cancel')"
                                    (click)="createOrEditToolingCancelBillModal.showList(selectedAccounts)"
                                    class="btn btn-default m--padding-left-5 m--padding-right-5"
                                    [disabled]="!selectedAccounts?.length > 0"
                                    type="button"
                                >
                                    <i nz-icon type="printer" theme="outline"></i> 工装室退库
                                </button> -->
                                <button *ngIf="permission.isGranted('Pages.Tooling.Account.EditRemark')" (click)="updatetoolingAccountRemark.show(selectedAccounts[0].id)"
                                    class="btn btn-default m--padding-left-5 m--padding-right-5" [disabled]="selectedAccounts?.length != 1" type="button">
                                    <i nz-icon type="printer" theme="outline"></i> 更改备注
                                </button>
                                <button
                                    *ngIf="permission.isGranted('Pages.Tooling.Account.Record')"
                                    type="button"
                                    class="btn btn-default m--padding-left-5 m--padding-right-5"
                                    (click)="accountRecordModal.show(selectedAccounts[0])"
                                    [disabled]="selectedAccounts?.length != 1"
                                >
                                    交易记录
                                </button>
                                <button
                                    *ngIf="permission.isGranted('Pages.Tooling.Account.Print')"
                                    (click)="printBillList()"
                                    class="btn btn-default m--padding-left-5 m--padding-right-5"
                                    type="button"
                                >
                                    <i nz-icon type="printer" theme="outline"></i> 台帐汇总打印
                                </button>
                                <!-- <button type="button" class="btn btn-default m--padding-left-5 m--padding-right-5">
                                    详细信息
                                </button> -->
                            </div>
                        </div>

                        <div class="col-md-12 m--margin-top-20">
                            <p-table
                                #dataTable
                                (onLazyLoad)="getAccounts($event)"
                                [value]="primengTableHelper.records"
                                [rows]="primengTableHelper.defaultRecordsCountPerPage"
                                [paginator]="false"
                                [lazy]="true"
                                [scrollable]="true"
                                ScrollWidth="100%"
                                [responsive]="primengTableHelper.isResponsive"
                                [resizableColumns]="primengTableHelper.resizableColumns"
                                selectionMode="multiple"
                                scrollHeight="{{ scrollHeight }}"
                                [(selection)]="selectedAccounts"
                            >
                                <ng-template pTemplate="header">
                                    <tr>
                                        <th style="width: 40px">
                                            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                                        </th>
                                        <th style="width: 40px">
                                            序号
                                        </th>
                                        <ng-container *ngFor="let ext of extensions">
                                            <th width="{{ ext.width }}">
                                                {{ ext.title }}
                                            </th>
                                        </ng-container>
                                    </tr>
                                </ng-template>

                                <ng-template pTemplate="body" let-record="$implicit" let-i="rowIndex">
                                    <tr [pSelectableRow]="record">
                                        <td style="width: 40px">
                                            <p-tableCheckbox [value]="record"></p-tableCheckbox>
                                        </td>
                                        <td style="width: 40px">
                                            {{ i + 1 + paginator.first }}
                                        </td>
                                        <ng-container *ngFor="let ext of extensions">
                                            <ng-container [ngSwitch]="ext.formatType">
                                                <ng-container *ngSwitchCase="1">
                                                    <td width="{{ ext.width }}">
                                                        {{ record[ext.key] | number: '1.0-0' }}
                                                    </td>
                                                </ng-container>
                                                <ng-container *ngSwitchCase="2">
                                                    <td width="{{ ext.width }}">
                                                        {{ record[ext.key] | number: '1.2-2' }}
                                                    </td>
                                                </ng-container>
                                                <ng-container *ngSwitchCase="4">
                                                    <td width="{{ ext.width }}">
                                                        {{ record[ext.key] | momentFormat: 'YYYY-MM-DD' }}
                                                    </td>
                                                </ng-container>
                                                <ng-container *ngSwitchDefault>
                                                    <td width="{{ ext.width }}">
                                                        {{ record[ext.key] }}
                                                    </td>
                                                </ng-container>
                                            </ng-container>
                                        </ng-container>
                                    </tr>
                                </ng-template>
                            </p-table>

                            <div class="primeng-no-data" *ngIf="primengTableHelper.totalRecordsCount == 0">
                                没有数据
                            </div>
                            <div class="primeng-paging-container">
                                <p-paginator
                                    [rows]="primengTableHelper.defaultRecordsCountPerPage"
                                    #paginator
                                    (onPageChange)="getAccounts($event)"
                                    [totalRecords]="primengTableHelper.totalRecordsCount"
                                    [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage"
                                >
                                </p-paginator>
                                <span class="total-records-count">
                                    {{ 'TotalRecordsCount' | localize: primengTableHelper.totalRecordsCount }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <accountRecordModal #accountRecordModal></accountRecordModal>
    <baseFieldDetailModal #baseFieldDetailModal></baseFieldDetailModal>

    <!-- <createOrEditToolingBorrowBillModal
        #createOrEditToolingBorrowBillModal
        (modalSave)="getAccounts($event)"
    ></createOrEditToolingBorrowBillModal>
    <createOrEditToolingBorrowOutBillModal
        #createOrEditToolingBorrowOutBillModal
        (modalSave)="getAccounts($event)"
    ></createOrEditToolingBorrowOutBillModal>

    <createOrEditToolingCancelBillModal
        #createOrEditToolingCancelBillModal
        (modalSave)="getAccounts($event)"
        (accountShow)="toolingAccountBaseInfoModal.show()"
    ></createOrEditToolingCancelBillModal>
    <toolingAccountBaseInfoModal
        #toolingAccountBaseInfoModal
        handletype="退库"
        (modalSave)="createOrEditToolingCancelBillModal.addAccoutInfo($event)"
    ></toolingAccountBaseInfoModal>

    <createOrEditToolingScrapBillModal
        #createOrEditToolingScrapBillModal
        (modalSave)="getAccounts($event)"
        (accountShow)="toolingAccountBaseInfoModalScrap.show()"
    ></createOrEditToolingScrapBillModal>
    <toolingAccountBaseInfoModal
        #toolingAccountBaseInfoModalScrap
        handletype="报废"
        (modalSave)="createOrEditToolingScrapBillModal.addAccoutInfo($event)"
    ></toolingAccountBaseInfoModal>

    <createOrEditToolingReceiveBillModal
        #createOrEditToolingReceiveBillModal
        (modalSave)="getAccounts($event)"
        (accountShow)="toolingAccountBaseInfoModalReceive.show()"
    ></createOrEditToolingReceiveBillModal>
    <toolingAccountBaseInfoModal
        #toolingAccountBaseInfoModalReceive
        handletype="领用"
        (modalSave)="createOrEditToolingReceiveBillModal.addAccoutInfo($event)"
    ></toolingAccountBaseInfoModal>

    <createOrEditToolingTransferModal
        #createOrEditToolingTransferModal
        (modalSave)="getAccounts($event)"
        (accountShow)="toolingAccountBaseInfoModalTransfter.show(undefined,$event)"
    ></createOrEditToolingTransferModal>
    <toolingAccountBaseInfoModal
        #toolingAccountBaseInfoModalTransfter
        handletype="调拨"
        (modalSave)="createOrEditToolingTransferModal.addAccoutInfo($event)"
    ></toolingAccountBaseInfoModal> -->
    <updatetoolingAccountRemark #updatetoolingAccountRemark (modalSave)="getAccounts($event)"></updatetoolingAccountRemark>
   
</div>
